"use client"

import { useState, useRef, useEffect } from "react"

export function useScrollContainer() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isScrolledToStart, setIsScrolledToStart] = useState(true)
  const [isScrolledToEnd, setIsScrolledToEnd] = useState(false)

  const checkScrollPosition = () => {
    const container = containerRef.current
    if (!container) return

    setIsScrolledToStart(container.scrollLeft <= 0)
    setIsScrolledToEnd(container.scrollLeft + container.clientWidth >= container.scrollWidth - 10)
  }

  const scrollLeft = (amount = 200) => {
    const container = containerRef.current
    if (!container) return
    container.scrollBy({ left: -amount, behavior: "smooth" })
  }

  const scrollRight = (amount = 200) => {
    const container = containerRef.current
    if (!container) return
    container.scrollBy({ left: amount, behavior: "smooth" })
  }

  useEffect(() => {
    const container = containerRef.current
    if (!container) return

    checkScrollPosition()
    container.addEventListener("scroll", checkScrollPosition)
    window.addEventListener("resize", checkScrollPosition)

    return () => {
      container.removeEventListener("scroll", checkScrollPosition)
      window.removeEventListener("resize", checkScrollPosition)
    }
  }, [])

  return {
    containerRef,
    isScrolledToStart,
    isScrolledToEnd,
    scrollLeft,
    scrollRight,
    checkScrollPosition,
  }
}
